<!-- 模型图层 -->
<template>
  <div>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl'
import axios from 'axios'
import { Threebox, THREE } from 'threebox-plugin'
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import DBUtil from '../../utils/indexeddb.js'

export default {
  setup() {
    const state = reactive({
      value: 'value'
    })

    const map = getCurrentInstance().proxy.$root.$map,
      path = import.meta.env.VITE_APP_PATH

    let molayersData, schoolInfo

    onMounted(() => {
      console.log('模型控制中的map', map)
      // initThreeBox()
      // loadLayerJson();
    })

    // 初始化threebox对象并加到全局环境
    function initThreeBox() {
      window.tb = new Threebox(map, map.getCanvas().getContext('webgl'), {
        defaultLights: true
        // realSunlight: true,
        // enableSelectingFeatures: true, //模型是否可以被选择
        // enableSelectingObjects: true, //模型是否可以被选中
        // enableDraggingObjects: true, //模型是否可以被拖动和移动
        // enableRotatingObjects: true, //模型是否可以被旋转
        // enableTooltips: true // 模型是否显示标签
      })

      console.log('window.tb', window.tb)
    }

    // 加载配置文件中图层信息
    async function loadLayerJson(info) {
      schoolInfo = info
      const layerJson = await axios
        .get(path + 'config/' + schoolInfo.model)
        .catch((err) => console.log(err))

      molayersData = layerJson.data
      setTimeout(() => {
        addModelLayer()
      }, 1000)
      // console.log("图层信息", layerJson);
    }

    // 根据配置信息加模型
    async function addModelLayer() {
      // 设置模型编辑时旋转步数
      tb.rotationStep = 1
      const dbutilObj = new DBUtil()
      const db = await dbutilObj.initDataBase()

      map.addLayer({
        id: schoolInfo.modelLayerid,
        type: 'custom',
        renderingMode: '3d',
        onAdd: function (map, mbxContext) {
          for (const model of molayersData.models) {
            dbutilObj.get(db, model.obj, 1).then((blob) => {
              const url = URL.createObjectURL(new Blob([blob]))

              console.log('url', url)
              model.zqobj = model.obj
              model.obj = url
              tb.loadObj(model, function (mo) {
                // console.log(mo);
                const soldier = mo.setCoords(model.position)

                soldier.uuid = model.name
                soldier.traverse((e) => {
                  if (e.material) {
                    e.material.format = THREE.RGBAFormat
                    if(model.belong === 'zdmodels.json') {
                      e.material.color.offsetHSL(0, 0, -0.3)
                      e.material.emissive = e.material.color
                      e.material.emissiveMap = e.material.map
                    }
                  }
                })
                tb.add(soldier)
                // self.modelAll.push(soldier);
                // console.log('dracoLoader', model)
                // 监听模型点击事件
                //   soldier.addEventListener(
                //     "SelectedChange",
                //     function (ent) {
                //       // 先将上一个高亮删除
                //       if (self.selectMode) {
                //         self.selectMode.traverse((e) => {
                //           if (e.material) {
                //             e.material.color = new THREE.Color();
                //           }
                //         });
                //       }
                //       if (ent.detail) {
                //         // 一个变量控制是否点中模型
                //         self.clickMode = true;
                //         self.selectMode = ent.detail;
                //         self.selectMode.addTooltip(ent.detail.uuid, true);
                //       }
                //     },
                //     false
                //   );
                //   // 监听鼠标移到模型事件
                //   soldier.addEventListener(
                //     "ObjectMouseOver",
                //     function (ent) {
                //       // console.log(ent);
                //       ent.detail.addTooltip(ent.detail.uuid, true);
                //       ent.detail.children[0].traverse((e) => {
                //         if (e.material) {
                //           e.material.color = new THREE.Color(0x2ad4d4);
                //         }
                //       });
                //     },
                //     false
                //   );
                //   // 监听鼠标移出模型事件
                //   soldier.addEventListener(
                //     "ObjectMouseOut",
                //     function (ent) {
                //       // console.log(ent);
                //       ent.detail.children[0].traverse((e) => {
                //         if (e.material) {
                //           e.material.color = new THREE.Color();
                //         }
                //       });
                //       if (
                //         self.selectMode &&
                //         self.selectMode.uuid === ent.detail.uuid
                //       ) {
                //         ent.detail.children[0].traverse((e) => {
                //           if (e.material) {
                //             e.material.color = new THREE.Color(0x2ad4d4);
                //           }
                //         });
                //       }
                //     },
                //     false
                //   );
              })
            })
          }
        },
        render: function (gl, matrix) {
          tb.update()
        }
      })
      // 将模型图层位置调整到建筑图层前
      console.log('schoolInfo', schoolInfo)
      schoolInfo.layers.some((layer) => {
        if(layer.name === '校内建筑') {
          map.moveLayer(schoolInfo.modelLayerid, layer.layerId)
          return true
        }
      })
      // .on("click", function (ent) {
      //   console.log("点击事件", ent);
      // 点击模型正常显示标签，但是点击场景未点击到模型需要删除标签
      // if (self.selectMode && !self.clickMode) {
      //   self.selectMode.removeTooltip();
      //   self.selectMode.children[0].traverse((e) => {
      //     if (e.material) {
      //       e.material.color = new THREE.Color();
      //     }
      //   });
      //   self.selectMode = null;
      // }
      // self.clickMode = false;
      // if (ent.target.selectedObject){
      //   // 先将所有模型复原
      //   // for (const mo of self.modelAll) {
      //   //   mo.traverse((e) => {
      //   //     if (e.material) {
      //   //       e.material.format = THREE.RGBAFormat
      //   //       e.material.color = new THREE.Color()
      //   //     }
      //   //   })
      //   // }
      //   // if (self.selectMode) {
      //   //   self.selectMode.traverse((e) => {
      //   //     if (e.material) {
      //   //       e.material.color = new THREE.Color()
      //   //     }
      //   //   })
      //   // }
      //   // console.log('self.modelAll', self.modelAll);

      //   const selectedObject = ent.target.selectedObject.children[0]

      //   // 材质改为红色
      //   selectedObject.traverse((e) => {
      //     if (e.material) {
      //       // e.material.opacity = 0.1
      //       // e.material.transparent = true
      //       e.material.color = new THREE.Color( 0xff0000 )
      //     }
      //   })
      //   setTimeout(function(){
      //     selectedObject.traverse((e) => {
      //       if (e.material) {
      //         e.material.color = new THREE.Color()
      //       }
      //     })
      //   },500)
      //   setTimeout(function(){
      //     selectedObject.traverse((e) => {
      //       if (e.material) {
      //         // e.material.opacity = 0.1
      //         // e.material.transparent = true
      //         e.material.color = new THREE.Color(0xff0000)
      //       }
      //     })
      //   },1000)
      //   setTimeout(function(){
      //     selectedObject.traverse((e) => {
      //       if (e.material) {
      //         // e.material.opacity = 0.1
      //         // e.material.transparent = true
      //         e.material.color = new THREE.Color( )
      //       }
      //     })
      //   },1500)
      // }
      // });
    }

    return {
      ...toRefs(state),
      loadLayerJson
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
